<template>
	<view class="ask">
		<form action="">
			<view class="page">
				<view class="page__bd" style="padding: 20rpx">
					<uni-forms ref="form" :model="formData" :rules="rules">
						<uni-forms-item required name="gender" class="form-item">
							<view style="display: inline-block; margin-bottom: 5rpx;">性别</view>
							<radio-group v-model="formData.gender" @change="radioChange($event,'gender')">
								<label class="radio">
									<radio :value="0" :checked="formData.gender==0" />男
								</label>
								<label class="radio">
									<radio :value="1" :checked="formData.gender==1" />女
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item required name="age">
							<view style="display: inline-block; margin-bottom: 5rpx;">年龄</view>
							<input type="text" v-model="formData.age" placeholder="请输入年龄" />
						</uni-forms-item>
						<uni-forms-item required name="weight">
							<view style="display: inline-block; margin-bottom: 5rpx;">体重</view>
							<input type="text" v-model="formData.weight" placeholder="请输入体重" />
						</uni-forms-item>
						<uni-forms-item required name="height">
							<view style="display: inline-block; margin-bottom: 5rpx;">身高</view>
							<input type="text" v-model="formData.height" placeholder="请输入身高" />
						</uni-forms-item>
						<uni-forms-item required name="target">
							<view style="display: inline-block; margin-bottom: 5rpx;">您期望您的健康计划所要达到的目标是</view>
							<radio-group v-model="formData.target" @change="radioChange($event,'target')">
								<label class="radio">
									<radio :value="0" :checked="formData.target==0" />减脂
								</label>
								<label class="radio">
									<radio :value="1" :checked="formData.target==1" />增肌
								</label>
								<label class="radio">
									<radio :value="2" :checked="formData.target==2" />保持
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item required name="intensity">
							<view style="display: inline-block; margin-bottom: 5rpx;">您期望制定什么样的运动计划</view>
							<radio-group v-model="formData.intensity" @change="radioChange($event,'intensity')">
								<label class="radio">
									<radio :value="0" :checked="formData.intensity==0" />轻量级（每周1-2次）
								</label>
								<label class="radio">
									<radio :value="1" :checked="formData.intensity==1" />中量级（每周3-5次）
								</label>
								<label class="radio">
									<radio :value="2" :checked="formData.intensity==2" />重量级（每周6-7次）
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item required name="diet">
							<view style="display: inline-block; margin-bottom: 5rpx;">您的饮食结构是</view>
							<radio-group v-model="formData.diet" @change="radioChange($event,'diet')">
								<label class="radio">
									<radio :value="0" :checked="formData.diet==0" />荤菜为主
								</label>
								<label class="radio">
									<radio :value="1" :checked="formData.diet==1" />素菜为主
								</label>
								<label class="radio">
									<radio :value="2" :checked="formData.diet==2" />荤素搭配
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item required name="protein">
							<view style="display: inline-block; margin-bottom: 5rpx;">您对蛋奶类的使用情况是</view>
							<radio-group v-model="formData.protein" @change="radioChange($event,'protein')">
								<label class="radio">
									<radio :value="0" :checked="formData.protein==0" />经常吃
								</label>
								<label class="radio">
									<radio :value="1" :checked="formData.protein==1" />一周三次以上
								</label>
								<label class="radio">
									<radio :value="2" :checked="formData.protein==2" />一周两次及以下
								</label>
								<label class="radio">
									<radio :value="3" :checked="formData.protein==3" />基本不吃
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item required name="satisfaction">
							<view style="display: inline-block; margin-bottom: 5rpx;">您认为您目前的身体状况如何</view>
							<radio-group v-model="formData.satisfaction" @change="radioChange($event,'satisfaction')">
								<label class="radio">
									<radio :value="0" :checked="formData.satisfaction==0" />非常健康
								</label>
								<label class="radio">
									<radio :value="1" :checked="formData.satisfaction==1" />比较健康
								</label>
								<label class="radio">
									<radio :value="2" :checked="formData.satisfaction==2" />不健康
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item required name="perference">
							<view style="display: inline-block; margin-bottom: 5rpx;">您平时通过什么方式进行体重控制</view>
							<radio-group v-model="formData.perference" @change="radioChange($event,'perference')">
								<label class="radio">
									<radio :value="0" :checked="formData.perference==0" />节食
								</label>
								<label class="radio">
									<radio :value="1" :checked="formData.perference==1" />体育运动
								</label>
								<label class="radio">
									<radio :value="2" :checked="formData.perference==2" />食用素食
								</label>
								<label class="radio">
									<radio :value="3" :checked="formData.perference==3" />其他方式
								</label>
							</radio-group>
						</uni-forms-item>
					</uni-forms>
					<button form-type="submit" @click="submitForm">进行评估</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	// pages/user/assess/assess.js
	export default {
		data() {
			return {
				formData: {
					gender: null,
					age: '',
					weight: '',
					height: '',
					target: null,
					intensity: null,
					diet: null,
					protein: null,
					satisfaction: null,
					perference: null,
				},
				rules: {
					gender: {
						rules: [{
							required: true,
							errorMessage: '此为必填项'
						}]
					},
					age: {
						rules: [{
								required: true,
								errorMessage: '此为必填项'
							},
							{
								maxLength: 3,
								errorMessage: '请输入正确的年龄'
							},
							{
								format: Number,
								errorMessage: '请输入正确的年龄'
							}
						]
					},
					weight: {
						rules: [{
								required: true,
								errorMessage: '此为必填项'
							},
							{
								maxLength: 3,
								errorMessage: '请输入一个正确的体重'
							},
							{
								format: Number,
								errorMessage: '请输入一个正确的体重'
							}
						]
					},
					height: {
						rules: [{
								required: true,
								errorMessage: '此为必填项'
							},
							{
								maxLength: 3,
								errorMessage: '请输入一个正确的身高'
							},
							{
								format: Number,
								errorMessage: '请输入一个正确的身高'
							}
						]
					},
					target: {
						rules: [{
							required: true,
							errorMessage: '此为必填项'
						}]
					},
					intensity: {
						rules: [{
							required: true,
							errorMessage: '此为必填项'
						}]
					},
					diet: {
						rules: [{
							required: true,
							errorMessage: '此为必填项'
						}]
					},
					protein: {
						rules: [{
							required: true,
							errorMessage: '此为必填项'
						}]
					},
					satisfaction: {
						rules: [{
							required: true,
							errorMessage: '此为必填项'
						}]
					},
					perference: {
						rules: [{
							required: true,
							errorMessage: '此为必填项'
						}]
					}
				}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			radioChange: function(evt, value) {
				console.log(evt)
				console.log(value)
				this.formData[value] = evt.detail.value
			},
			submitForm() {
				let that = this
				console.log(this.formData)
				this.$refs.form.validate().then(res => {
					this.$https({
						url: this.$baseUrl + '/plan/generate',
						method:'POST',
						data:that.formData,
						success(res) {
							console.log(res)
							let info = JSON.stringify(res.data.data)
							
							uni.navigateTo({
								url: `/pages/health/plan/plan?data=${encodeURIComponent(info)}`
							});
						},
						fail(res) {
							console.log(res)
						}
					})
				}).catch(err => {

					console.log('表单错误信息：', err);
				})
			}
		}
	};
</script>
<style>
	@import './assess.css';
</style>
